<template>
  <div class="container">
    <el-collapse v-model="activeNames" @change="handleChange" class="conts">
      <el-collapse-item title="vueUi框架网站" name="1">
        <div>
          <span>element ui PC框架</span>
          <a href="https://element.eleme.cn/#/zh-CN/component/installation" target="_blanck">https://element.eleme.cn/#/zh-CN/component/installation</a>
        </div>
        <div>
          <span>vant ui 手机框架</span>
          <a href="https://youzan.github.io/vant/#/zh-CN/quickstart" target="_blanck">https://youzan.github.io/vant/#/zh-CN/quickstart</a>          
        </div>
        <div>
          <span>Ant Design + Vue PC框架</span>
          <a href="https://www.antdv.com/docs/vue/introduce-cn/" target="_blanck">https://www.antdv.com/docs/vue/introduce-cn/</a>          
        </div>
        <div>
          <span>Ant Design + Vue 脚手架市场</span>
          <a href="https://scaffold.ant.design/#/?tags=vue" target="_blanck">https://scaffold.ant.design/#/?tags=vue</a>          
        </div>

        <div>
          <span>Vuetify-UI pc 兼容 手机端</span>
          <a href="https://vuetifyjs.com/zh-Hans/getting-started/quick-start/" target="_blanck">https://vuetifyjs.com/zh-Hans/getting-started/quick-start/</a>          
        </div> 

        <div>
          <span>iView UI</span>
          <a href="http://v1.iviewui.com/docs/guide/install" target="_blanck">http://v1.iviewui.com/docs/guide/install</a>          
        </div>        

        <div>
          <span>jQuery H5 UI框架</span>
          <a href="http://jqweui.com/components#grid" target="_blanck">http://jqweui.com/components#grid</a>          
        </div>
      
        
      </el-collapse-item>
      <el-collapse-item title="Vue类" name="2">
        <div>
          <span>Vue 框架</span>
          <a href="https://cn.vuejs.org/v2/guide/installation.html" target="_blanck">https://cn.vuejs.org/v2/guide/installation.html</a>
        </div>
        <div>
          <span>Nuxt.js 框架(做seo推荐)</span>
          <a href="https://zh.nuxtjs.org/guide/installation/" target="_blanck">https://zh.nuxtjs.org/guide/installation/</a>
        </div>
        <div>
          <span>vue-element-admin 管理端框架</span>
          <a href="https://panjiachen.github.io/vue-element-admin-site/zh/" target="_blanck">https://panjiachen.github.io/vue-element-admin-site/zh/</a>
        </div>
        
      </el-collapse-item>
      <el-collapse-item title="HTTP请求" name="3">
        <div>
          <span>Axios</span>
          <a href="https://www.kancloud.cn/yunye/axios/234845" target="_blanck">https://www.kancloud.cn/yunye/axios/234845</a>
        </div>
      </el-collapse-item>
      <el-collapse-item title="小程序和公众号类的" name="4">
        <div>
          <span>Uni-app</span>
          <a href="https://uniapp.dcloud.io/" target="_blanck">https://uniapp.dcloud.io/</a>
        </div>

        <div>
          <span>mpvue-weui 微信UI框架</span>
          <a href="https://mpcomponent.github.io/mpvue-weui/guide/install.html" target="_blanck">https://mpcomponent.github.io/mpvue-weui/guide/install.html</a>          
        </div>
      </el-collapse-item>
      <el-collapse-item title="第三方和插件类" name="5">
        <div>
          <span>webpack</span>
          <a href="https://www.webpackjs.com/concepts/loaders/" target="_blanck">https://www.webpackjs.com/concepts/loaders/</a>
        </div>

        <div>
          <span>swiper轮播图</span>
          <a href="https://www.swiper.com.cn/api/index.html" target="_blanck">https://www.swiper.com.cn/api/index.html</a>
        </div>
        
      </el-collapse-item>
      <el-collapse-item title="css类" name="6">
        <div>
          <span>Sass</span>
          <a href="https://sass.bootcss.com/guide" target="_blanck">https://sass.bootcss.com/guide</a>
        </div>
        <div>
          <span>less</span>
          <a href="https://less.bootcss.com/usage/" target="_blanck">https://less.bootcss.com/usage/</a>
        </div>
        <div>
          <span>icon</span>
          <a href="https://www.iconfont.cn/" target="_blanck">https://www.iconfont.cn/</a>
        </div>
      </el-collapse-item>

      <el-collapse-item title="其他" name="6">
        <div>
          <span>一些集合demo</span>
          <a href="https://www.cnblogs.com/jearay/p/8580958.html" target="_blanck">https://www.cnblogs.com/jearay/p/8580958.html</a>
        </div>
      </el-collapse-item>

      
    </el-collapse>

    
  </div>
</template>

<script>

export default {
  data() {
    return {
      activeNames: ['1','2','3','4','5','6','7']
    };
  },

  methods: {
    handleChange(val) {
      console.log(val);
    }
  },

  mounted: function() {
  },
  updated: function() {
  }
};
</script>

<style scoped lang="scss">
.conts{
  span{
    font-size: 16px;
    display: inline-block;
    width: 230px;
    text-align: right;
  }
  a{
    margin-left:10px;
    font-size: 16px;
  }
}
.conts>>>.el-collapse-item__header{
  font-size: 18px;
  font-weight: 600;
  color:#409EFF;
}
</style>
